import { useEffect, useState } from 'react'
import './css/Mess.css';
import { Sticky } from 'react-vant';
import axios from 'axios';
import { useLocation, useNavigate } from 'react-router-dom';

axios.defaults.baseURL = 'http://127.0.0.1:3000';

function Mess() {
    const navigate = useNavigate();
    const [stores, setStores] = useState([]);
    // const { state: { username } } = useLocation();
    const id = "6721e5a62c1843b123e193f9"; //用户id
    // 获取商家
    const getStores = async () => {
        const { data: { data, code } } = await axios.get('/message/stores', { params: { id } });
        if (code === 200) {
            setStores(data)
        }
    }

    useEffect(() => {
        getStores();
    }, [])
    //   const userId = 'user123'; // 示例用户ID  
    //   const recipientId = 'user456'; // 示例接收者ID  
    return (
        <div className="messagePage">
            <Sticky>
                <div className='messagePage-top'>
                    <p>消息</p>
                </div>
            </Sticky>
            <div>
                {
                    stores.map(item => <div onClick={() => navigate('/chat', { state: { userId: id, recipientId: item._id } })} key={item._id} className='storeItem'>
                        <img src={item.src} alt="" />
                        <span>{item.name}</span>
                    </div>)
                }
            </div>
        </div>
    )
}

export default Mess

